Summary

The overview was built for desktop and broke down on phones. This makes it responsive end-to-end while keeping the desktop layout intact.

The three root problems:

• Sidebar pushed content off-screen. It's a fixed w-64 panel and main got ml-64 at every breakpoint, leaving ~134px of usable width on a 390px phone.
• Job-card names truncated even on desktop. The page nests a 2-column queue inside a 2/3 panel, so cards are only ~320px wide even at 1440px, and the name used truncate — hence needing a very wide window to read details.
• Bulk-action bars overflowed off both screen edges on mobile.

Changes

Navigation

• Sidebar is now an overlay drawer below lg (slides in over content with a dimmed backdrop, auto-closes on nav); the main offset is lg:-only so mobile uses full width. Desktop keeps the pinned, collapsible sidebar. New transient mobileNavOpen UI state (not persisted).
• Header has separate mobile (drawer) / desktop (collapse) hamburgers and trims the wordmark / status label / username on narrow screens.

Job cards (JobCard)

• Now a @container: the name wraps instead of truncating, the badge row wraps, the meta row stacks when narrow, and the action icons collapse into a labelled overflow menu on narrow cards (inline icons on wide ones). Fixes both mobile and the narrow-desktop-queue truncation.

Group page

• Header title/actions stack on mobile; bulk-action bars are contained + wrap on mobile, centered-floating on desktop.
• Template cards are container-driven (full-width wrapping name + action row below on mobile, side-by-side on desktop); fixes a horizontal-overflow bug from a bare grid track + long <pre> config.

Other

• JobDetailDialog field grids stack on small screens; long titles wrap.
• Runners table scrolls horizontally on mobile (it was clipping the Labels and Last Seen columns via overflow-hidden); header counts wrap.

Testing

Driven in a real browser at 390 / 768 / 1024 / 1440 px across Dashboard, Queue, History (linear + grouped), Templates, Runners, the job-detail dialog, the nav drawer, and the bulk-action bar. No horizontal overflow on any page (scrollWidth == clientWidth). The @container cards verified to switch between the overflow menu (narrow) and inline icons (wide). tsc, eslint, and vite build all clean.

Note

This branch also carries the pre-existing benchmarkoor run-link work that was already in the working tree (config.ts / config.json and the run links in JobCard/JobDetailDialog) — it's intertwined with the card refactor and config.ts is needed to compile. Happy to split it out if preferred.

Known nit (not addressed here): at the lg edge (~1024–1180px) with the sidebar expanded, Pending cards get dense because the 3-col page grid and 2-col queue both switch on at lg. Functional (no clipping/overflow); can move the queue split to xl: if we want it roomier in that band.